<template>
	<view class="g-picker">
		<view class="g-picker-value" @click="showPicker">
			<u-input v-model="val" disabled disabledColor="#fff" :inputAlign="inputAlign" border="none"
				:placeholder="placeholder" style="pointer-events:none">
			</u-input>
			<u-icon v-if="!disabled" name="arrow-right" color="#c0c4cc"></u-icon>
		</view>
		<u-popup :show="show" :round="6" mode="bottom">
			<view class="g-picker-con">
				<view class="g-picker-operate">
					<text @click="show = false">取消</text>
					<text @click="confirm">确认</text>
				</view>
				<view class="g-picker-list">
					<view class="g-picker-item" v-for="(col, inx) in columnsList" :key="inx" @click="checkItem(col, inx)">
						<view :class="['g-picker-item_label', col.check ? 'g-picker-item--actived' : '']"
							:style="{ color: col.check ? activedColor : '#333' }">{{ col[filter.label] }}</view>
						<u-icon class="g-picker-item_icon" v-show="col.check" name="checkbox-mark"
							:color="activedColor"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	// model: {
	// 	prop: 'value',
	// 	event: 'change'
	// },
	props: {
		// picker组件绑定值，默认 name 用，拼接
		value: {
			type: String,
			default: ""
		},
		// 数据源
		columns: {
			type: Array,
			default: () => {
				return []
			}
		},
		// 数据显示格式化
		filter: {
			type: Object,
			default: () => {
				return {
					label: 'label',
					value: 'value'
				}
			}
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 选中后颜色
		activedColor: {
			type: String,
			default: "#F58621"
		},
		// 文本对齐方式
		inputAlign: {
			type: String,
			default: "right"
		},
		// 默认提示
		placeholder: {
			type: String,
			default: "请选择"
		}
	},
	data() {
		return {
			show: false,
			val: "",
			columnsList: [],
			value_chx: [],
		}
	},
	watch: {
		value: {
			handler(n) {
				if (n) this.reShow();
			},
			immediate: true
		},
		columns: {
			handler(n) {
				if (n.length) {
					if (n.length > this.columnsList.length)
						n.forEach(item => {
							this.columnsList.push({ label: item.name, value: item.id, check: item.check })
						})
					if (!this.columnsList.find(x => x.check)) {
						for (let val of this.columnsList) {
							this.$set(val, 'check', false)
						}
					} else {
						let value = [],
							label = []
						this.value_chx = this.columnsList.filter(v => v.check)
						for (let val of this.value_chx) {
							value.push(val[this.filter.value])
							label.push(val[this.filter.label])
						}
						this.show = false
						this.val = label.join(",")
					}
					this.$forceUpdate();
				} else {
					this.columnsList = [];
					this.val = "";
				}
			},
			immediate: true
		}
	},
	methods: {
		showPicker() {
			if (this.disabled) return
			this.show = true
		},
		reShow() {
			let data = this.value.split(",")
			setTimeout(() => {
				let ary = []
				for (let val of this.columnsList) {
					if (data.includes(val[this.filter.value])) {
						val.check = true
						ary.push(val[this.filter.label])
					}
				}
				this.val = ary.join(",")
			}, 100)
		},
		checkItem(col, inx) {
			if (col.label == '全部' && this.columnsList.slice(1).find(v => v.check == true)) {
				this.columnsList.forEach(x => {
					x.check = false;
				})
				this.columnsList[0].check = true;
				return
			}
			if (this.columnsList.find(v => v.label == '全部' && v.check == true)) {
				this.columnsList[0].check = false;
			}
			col.check = !col.check
		},
		confirm() {
			let value = [],
				label = []
			this.value_chx = this.columnsList.filter(v => v.check)
			for (let val of this.value_chx) {
				value.push(val[this.filter.value])
				label.push(val[this.filter.label])
			}
			this.show = false
			this.val = label.join(",")
			// this.$emit('input', this.val)
			this.$emit('confirm', this.value_chx, value, label)
			this.$forceUpdate();
		}
	}
}
</script>
<style lang="scss" scoped>
.g-picker {
	width: 100%;

	.g-picker-value {
		display: flex;
	}

	.g-picker-con {
		color: #333;
		font-size: 28rpx;

		.g-picker-operate {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			padding: 0 32rpx;

			text {
				color: #999;

				&:last-child {
					color: #3c9cff;
				}
			}
		}

		.g-picker-list {
			min-height: 30vh;
			max-height: 60vh;
			overflow-y: scroll;

			.g-picker-item {
				position: relative;
				width: 100%;
				height: 80rpx;

				.g-picker-item_label {
					width: 66%;
					margin: 0 auto;
					text-align: center;
					line-height: 80rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.g-picker-item--actived {
					font-weight: 600;
				}

				.g-picker-item_icon {
					position: absolute;
					top: 50%;
					right: 40rpx;
					transform: translateY(-50%);
				}
			}
		}
	}
}
</style>
